<template>
  <div>
    <el-form inline>
      <el-form-item label="关键字">
        <el-input placeholder="参数名" v-model="wareInfoSearchDto.searchValue"></el-input>
      </el-form-item>
    </el-form>
    <el-button @click="SearchWareInfoListFun">查询</el-button>
    <el-button @click="addDialog=true">新增</el-button>
    <el-button type="danger">批量删除</el-button>
  </div>
  <div>
    <el-table :data="wareInfoListData" style="width: 100%">
      <el-table-column type="selection" width="55"/>
      <el-table-column prop="id" label="编号" width="180"/>
      <el-table-column prop="name" label="名称" width="180"/>
      <el-table-column prop="address" label="地址"/>
      <el-table-column prop="areacode" label="区域编号"/>
      <el-table-column label="操作">
        <template #default="scope">
          <el-text type="danger">删除</el-text>
          <el-divider direction="vertical"/>
          <el-text>修改</el-text>
        </template>
      </el-table-column>
    </el-table>
    <div class="demo-pagination-block">

      <el-pagination
          hide-on-single-page
          v-model:current-page="pageInfo.pageNum"
          v-model:page-size="pageInfo.pageSize"
          :page-sizes="[100, 200, 300, 400]"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageInfo.totals"
      />
    </div>
  </div>
  <div>
    <el-dialog
        v-model="addDialog"
        title="新增仓库"
        width="30%"
        @close="addRef.resetFields()"
    >
      <div>
        <el-form :model="addWareInfoData" ref="addRef" label-width="80" size="large">
          <el-form-item label="仓库名" prop="name">
            <el-input v-model="addWareInfoData.name"></el-input>
          </el-form-item>
          <el-form-item label="地址" prop="address">
            <el-input v-model="addWareInfoData.address"></el-input>
          </el-form-item>
          <el-form-item label="区域编码" prop="areacode">
            <el-input v-model="addWareInfoData.areacode"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="addDialog = false">取消</el-button>
        <el-button type="primary" @click="addWareInfoFun">
          提交
        </el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {ref, reactive, onMounted, watch} from 'vue'
import {addWareInfo, getWareInfoListPage} from '@/api/home/warehouse/warehouse'

let addRef = ref()
let addDialog = ref(false)
let addWareInfoData = reactive({
  name: '',
  address: '',
  areacode: ''
})
let pageInfo = reactive({
  pageNum: 1,
  pageSize: 8,
  totals: ''
})
let wareInfoListData = ref([])
let wareInfoSearchDto = reactive({
  searchValue: ''
})

function addWareInfoFun() {
  addWareInfo(addWareInfoData).then(() => {
    SearchWareInfoListFun()
  })
  addDialog.value = false
}

function getWareInfoListFun(pageNum, pageSize, wareInfoSearchDto) {
  getWareInfoListPage(pageNum, pageSize, wareInfoSearchDto).then(res => {
    pageInfo.pageNum = res.data.current - 0
    pageInfo.totals = res.data.total - 0
    wareInfoListData.value = res.data.records
  })
}

function SearchWareInfoListFun() {
  getWareInfoListFun(pageInfo.pageNum, pageInfo.pageSize, wareInfoSearchDto)
}

onMounted(() => {
  SearchWareInfoListFun()
})

watch([pageInfo.pageNum, pageInfo.pageSize], () => {
  SearchWareInfoListFun()
})
</script>

<style scoped>

</style>
